import { useDispatch, useSelector } from "react-redux"
import { useEffect } from "react"
// 导入actionCreator
import { increment, decrement, addToNum  } from './store/modules/counterStore.js'
import { fetchChannelList } from './store/modules/channelStore.js'
function App() {
  const dispatch = useDispatch()
 
  const { count } = useSelector(state => state.counter)
  const { channelList } = useSelector(state => state.channel)
  console.log(channelList)
  // 使用useEffect触发异步请求执行
  useEffect(() => {
    dispatch(fetchChannelList())
  },[dispatch])
  return (
    <div className="App">
      <button onClick={() => dispatch(increment())}>+</button>
        {count }
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(addToNum(20))}>+20</button>
      <br /><br />
      <ul>
        {channelList.map(item => {
          return (
            <li key={item.id}>{item.name}</li> 
          )
        })}
      </ul>
    </div>
  )
}   

export default App
